import React, { useState } from "react";
import { motion } from "framer-motion";
import {
  FiGift,
  FiShoppingCart,
  FiHeart,
  FiMapPin,
  FiSettings,
  FiShoppingBag,
  FiMessageCircle,
} from "react-icons/fi";
import styled from "styled-components";
import { ActionSheet } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { store } from "@/store";
import { useTranslation } from "react-i18next";
import { PageLayout } from "@/components/grid/PageLayout";
import type { Action } from "antd-mobile/es/components/action-sheet";

const UserContainer = styled.div`
  display: flex;
  flex-direction: column;
  gap: 16px;
`;

const Header = styled(motion.div)`
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid var(--adm-color-border);
`;

const Avatar = styled.div`
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
`;

const UserInfo = styled.div`
  flex: 1;
  
  .nickname {
    font-size: 18px;
    font-weight: 600;
    color: var(--adm-color-text);
    margin-bottom: 4px;
  }
  
  .status {
    font-size: 14px;
    color: var(--adm-color-text-secondary);
  }
`;

const AccountCard = styled(motion.div)`
  background: white;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--adm-color-border);
  
  .balance {
    font-size: 14px;
    color: var(--adm-color-text-secondary);
    margin-bottom: 8px;
  }
  
  .balance-amount {
    font-size: 24px;
    font-weight: 600;
    color: var(--adm-color-primary);
  }
`;

const MenuGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  background: white;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid var(--adm-color-border);
`;

const MenuItem = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  
  svg {
    font-size: 24px;
    color: var(--adm-color-primary);
  }
  
  span {
    font-size: 12px;
    color: var(--adm-color-text);
    text-align: center;
  }
  
  &:hover {
    opacity: 0.8;
  }
`;

const ListMenu = styled.div`
  background: white;
  border-radius: 12px;
  border: 1px solid var(--adm-color-border);
  overflow: hidden;
`;

const ListItem = styled.div`
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  
  &:not(:last-child) {
    border-bottom: 1px solid var(--adm-color-border);
  }
  
  svg {
    font-size: 20px;
    color: var(--adm-color-primary);
  }
  
  span {
    font-size: 14px;
    color: var(--adm-color-text);
  }
  
  &:hover {
    background: var(--adm-color-box);
  }
`;

const ActionButton = styled.button<{ $variant?: 'primary' | 'secondary' }>`
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  background-color: ${props => props.$variant === 'primary' ? 'var(--adm-color-primary)' : 'var(--adm-color-box)'};
  color: ${props => props.$variant === 'primary' ? 'white' : 'var(--adm-color-text)'};
  
  &:hover {
    opacity: 0.9;
  }
`;

export default function User() {
  const [visible, setVisible] = useState(false);
  const navigate = useNavigate();
  const state = store.getState();
  const { t } = useTranslation();

  const actions: Action[] = [
    {
      text: <ActionButton $variant="secondary" onClick={() => navigate("/usercard")}>{t('用户.编辑资料')}</ActionButton>,
      key: "edit",
    },
    {
      text: <ActionButton $variant="primary" onClick={() => navigate("/login")}>{t('用户.登录')}</ActionButton>,
      key: "login",
    },
  ];

  const menuItems = [
    { icon: FiGift, label: t('用户.我的红包') },
    { icon: FiShoppingCart, label: t('导航.订单') },
    { icon: FiHeart, label: t('用户.我的收藏') },
    { icon: FiMapPin, label: t('用户.收货地址') },
    { icon: FiSettings, label: t('导航.设置'), onClick: () => navigate('/settings') },
  ];

  const listItems = [
    { icon: FiGift, text: t('用户.我的红包') },
    { icon: FiHeart, text: t('用户.我的收藏') },
    { icon: FiShoppingBag, text: t('用户.商户申请') },
    { icon: FiMapPin, text: t('用户.收货地址') },
    { icon: FiMessageCircle, text: t('用户.客服中心') },
  ];

  return (
    <PageLayout showBack={false}>
      <UserContainer>
        <Header 
          onClick={() => setVisible(true)}
          whileHover={{ scale: 1.02 }}
        >
          <Avatar>
            <img src={state.useUserReducer.avatar} alt="Avatar" />
          </Avatar>
          <UserInfo>
            <div className="nickname">{state.useUserReducer.username}</div>
            <div className="status">{t('用户.已绑定微信')}</div>
          </UserInfo>
        </Header>

        <AccountCard whileHover={{ scale: 1.02 }}>
          <div className="balance">{t('用户.我的红包')}</div>
          <div className="balance-amount">¥100.00</div>
        </AccountCard>

        <MenuGrid>
          {menuItems.map((item, index) => (
            <MenuItem key={index} onClick={item.onClick}>
              <item.icon />
              <span>{item.label}</span>
            </MenuItem>
          ))}
        </MenuGrid>

        <ListMenu>
          {listItems.map((item, index) => (
            <ListItem key={index}>
              <item.icon />
              <span>{item.text}</span>
            </ListItem>
          ))}
        </ListMenu>
      </UserContainer>

      <ActionSheet
        extra={t('用户.编辑资料')}
        cancelText={t('通用.取消')}
        visible={visible}
        actions={actions}
        onClose={() => setVisible(false)}
      />
    </PageLayout>
  );
}
